<template>
	<view class="body" :style="{height:bgHeight}">
		<view class="bg" :style="{height:bgHeight}">
			<image :style="{height:bgHeight}" :src='getimageBaseUrl("index-bg.jpg")' mode="aspectFill"></image>
		</view>
		<view class="content">
			<view class="logo">
				<image :src='getimageBaseUrl("logo.png")' mode=""></image>
			</view>
		</view>

		<!-- logo系统名称 -->
		<view class="login-text">
			<view class="text">
				社区应急救援
			</view>
		</view>
		<!-- 志愿者系统 -->
		<view class="content-message">
			<view class="volunteer" @click="gotoVolunteerPage">
				<view class="text-detail">志愿者登录</view>
			</view>
		</view>

		<!-- 求助页面 -->
		<view class="alarm-box">
			<view class="alarm" @click="gotoAlarm">
				<view class="alarm-text">我要求助</view>
			</view>
		</view>

		<view class="line-box">
			<view class="line-text"></view>
		</view>
		<!-- 管理员登录的图标盒子 -->
		<view class="admin-login-img" @click.native="gotoAdminPage">
			<image src="../../static/images/manager.png"></image>
		</view>
		<!-- 管理员登录的介绍 -->
		<view class="admin-login-text" @click.native="gotoAdminPage">
			管理员登录
			<!-- <view class="">管理员登录</view> -->
		</view>
		<!-- <view class="admin-login" >
				<view class="text">
				</view>
				<image @click="gotoAdminPage" class="admin-login-img" 
        :src='getimageBaseUrl("admin-login.png")'  mode=""></image>
			</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgHeight: 0,
			}
		},
		onLoad() {
			// 获取页面的高度
			uni.getSystemInfo({
				success: (res) => {
					this.bgHeight = res.screenHeight + 'px'
					console.log(this.bgHeight)
				}
			})
		},

		methods: {
			//登录和注册
			register() {
				this.getUserProfile();
				uni.login({
					provider: 'weixin',
					success: (res) => {
						let params = {
							url: `${this.$baseUrl}/login?code=${res.code}`,
						};
						this.$request(params).then(res => {
							uni.setStorageSync("user", res.data.data)
						}).catch(res => {
							console.log(res)
						})
					}
				})
			},

			getUserProfile() {
				uni.getUserProfile({
					desc: "完善用户个人信息",
					success: (res) => {
						uni.setStorageSync("userInfo", res.userInfo)
					}
				})
			},
			//去志愿者页面 mian页面
			gotoVolunteerPage() {
				this.register()
				uni.switchTab({
					url: "/pages/main/main"
				})
			},

			//去紧急管理员页面
			gotoAdminPage() {
				var admin = uni.getStorageSync('admin')
				if (admin === '') {
					uni.navigateTo({
						url: "/package_admin/adminLogin/adminLogin"
					})
				} else {
					uni.navigateTo({
						url: "/package_admin/emergencyAdministrator/emergencyAdministrator"
					})
				}


			},

			//去报警页面
			gotoAlarm() {
				uni.navigateTo({
					url: "/pages/alarm/alarm"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.line2 {
		height: 200rpx;
		width: 400rpx;
		border: 1px solid red;
	}

	.body {
		position: relative;

		.bg {
			//height: 100%;
			width: 100%;

			image {

				width: 750rpx;
				//height: 100%;
				opacity: 1;
				background: rgba(0, 0, 0, 0.4),
			}
		}

		.content {
			position: absolute;
			left: 316rpx;
			top: 304rpx;

			.logo {
				image {
					width: 120rpx;
					height: 120rpx;
					opacity: 1;
				}
			}
		}

		.login-text {
			position: absolute;
			left: 268rpx;
			top: 450rpx;

			.text {
				width: 216rpx;
				height: 56rpx;
				opacity: 1;
				margin-top: 16rpx;
				/** 文本1 */
				font-size: 36rpx;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 0px;
				color: rgba(255, 255, 255, 1);

			}
		}

		.content-message {
			position: absolute;
			text-align: center;
			left: 32px;
			top: 416px;
			left: 74rpx;
			top: 946rpx;

			.volunteer {
				width: 606rpx;
				height: 112rpx;
				line-height: 112rpx;
				background-color: #4D8DF8;
				border-radius: 56rpx;
				background: linear-gradient(90deg, rgba(93, 149, 245, 1) 0%, rgba(41, 121, 255, 1) 100%);

				.text-detail {
					font-size: 32rpx;
					font-weight: 600;
					letter-spacing: 0rpx;
					// line-height: 0px;
					color: rgba(255, 255, 255, 1);
					// text-align: left;
					vertical-align: top;
				}
			}
		}

		.alarm-box {
			position: absolute;
			text-align: center;
			left: 74rpx;
			top: 1106rpx;

			.alarm {
				width: 606rpx;
				height: 112rpx;
				line-height: 112rpx;
				background-color: #4D8DF8;
				border-radius: 56rpx;
				background: linear-gradient(90deg, rgba(242, 92, 92, 1) 0%, rgba(227, 41, 41, 1) 100%);

				.alarm-text {
					font-size: 16px;
					font-weight: 600;
					letter-spacing: 0px;
					// line-height: 0px;
					color: rgba(255, 255, 255, 1);
					// text-align: left;
					vertical-align: top;
				}
			}
		}

		// 紧急管理员登录
		.line-box {
			position: absolute;
			left: 72rpx;
			top: 1458rpx;

			.line-text {
				width: 606rpx;
				height: 1rpx;
				opacity: 0.4;
				background: rgba(204, 204, 204, 1);
				border-bottom: 1rpx solid rgba(255, 255, 255, 1);
			}
		}

		// 管理员登录图标      
		.admin-login-img {
			position: absolute;
			left: 285rpx;
			top: 1488rpx;

			image {
				width: 32rpx;
				height: 32rpx;
				opacity: 1;
			}
		}

		//管理员登录文字提示
		.admin-login-text {
			position: absolute;
			left: 325rpx;
			top: 1484rpx;
			width: 140rpx;
			height: 40rpx;
			opacity: 1;
			/** 文本1 */
			font-size: 28rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 40rpx;
			color: rgba(230, 230, 230, 1);
			text-align: left;
			vertical-align: top;
		}

	}
</style>
